<template>
  <div class="follow_list">
    <div class="common_bg" v-if="studentList.length !== 0"></div>
    <div v-if="studentList.length == 0" class="noData">
      <img src="../../../assets/img/nodata.png" alt="">
      <p>暂时还没有数据</p>
    </div>
    <div v-else class="container">
      <div class="search_box">
        <div class="search">
          <i class="icon_date"></i>
          <span class="">{{nowDate}}</span>
          <span class="" style="margin-left: auto; margin-right: 20px;">{{nowDay}}</span>
        </div>
      </div>
      <div class="un_follow_box">
        <!-- <span>待跟进 ({{totalRows}})</span> -->
      </div>

      <div class="student_list">
        <div
          v-for="(item, index) in studentList" 
          :key="index"
          @click="toStudentDetail(item, $event)"
          class="student_item">
          <div class="avatar">
            <img :src="computedAvatar(item)" alt="">
          </div>
          <div class="student_info">
            <div class="info1 info">
              <span class="student_name">{{item.studentName}}</span>
              <span class="intention_level" v-if="item.strengthRemark">意向 : {{ item.strengthRemark }}</span>
              <div class="phone_box">
                <i class="icon_phone"></i>
                <a :href="`tel:${item.linkPhone}`" class="phone">{{item.linkPhone}}</a>
              </div>
              <span class="status">{{item.statusName}}</span>
            </div>
            <div class="info2 info">
              <span class="parent_name">{{item.linkPerson}}</span>
              <span class="time" :class="{'timeZero':item.timeZero}">{{item.notFollowDays}}</span>
            </div>
            <div class="info3 info">
              <span class="prev_follow">上次跟进时间 : {{item.followLastTime}}</span>
            </div>
            <div class="info3 info">
              <span class="next_follow">下次跟进时间 : {{item.nextFollowTime}}</span>
            </div>
          </div>

        </div>
      </div>

      <!-- <van-pagination 
        v-model="curPage" 
        :page-count="totalPages"
        mode="simple"
        @change="changePage"
      /> -->

    </div>

    <div class="icon_place" @click="screenList.showSearch = true"></div>


    <!-- 弹窗层 -->
    <screen :screenList="screenList" :screenData="screenData" @reset="reset" @searchData="searchData" @schoolChange="schoolChange"></screen>

    <!-- 弹窗层 -->

  </div>
</template>

<style>

.follow_list .student_list .van-cell{
  margin-bottom: .133333rem;
  padding: .4rem .426667rem;
}
</style>
<style scoped>


.follow_list .container {
  position: relative;
  padding: .346667rem 0 0 0;
}

.follow_list .van-cell {
  padding: 15px 16px;
}

.follow_list .search_box {
  padding: .2rem .826667rem;
  box-sizing: border-box;
}
.follow_list .search {
  background:rgba(255,255,255, .35);
  border-radius:38px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
}

.follow_list .search span {
  font-size: .4rem;
  color: #fff;
  margin-left: .4rem;
}
.follow_list .un_follow_box {
  font-size: .373333rem;
  color: #fff;
  padding: 0 .266667rem;
  box-sizing: border-box;
}

.follow_list .allocation_btn_box {
  height: 1.333333rem;
  background:linear-gradient(236deg,rgba(255,152,83,1) 0%,rgba(255,151,151,1) 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .266667rem;
  box-sizing: border-box;
  margin-top: .533333rem;
  position: sticky;
  width: 100%;
  bottom: 0;
}
.follow_list .ckeck_num {
  font-size: .373333rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.follow_list .ckeck_num .num {
  color: #E02020;
  width: .56rem;
  height: .56rem;
  display: inline-block;
  background: #fff;
  border-radius: 50%;
  margin: 0 .08rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.follow_list .student_list {
  margin-top: .133333rem;
}


.follow_list .student_list {
  background: #fff;
  padding: 0 .266667rem;
}
.follow_list .student_number{
  display: flex;
  align-items: center;
  padding: 0 .266667rem;
  box-sizing: border-box;
}
.follow_list .student_number span{
  font-size: .373333rem;
  color: #fff;
}
.follow_list .student_number .number {
  width: .946667rem;
  height: .32rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #77A4FF;
  border-radius: .186667rem;
  font-size: .266667rem;
  margin-left: .133333rem;
}

.follow_list .student_item {
  display: flex;
  align-items: center;
}

.follow_list .student_item:last-child .student_info {
  border-bottom: none;
}

.student_item .avatar {
  display: flex;
  justify-content: center;
  align-items: center;
}
.student_item .avatar img {
  
  width: 1.226667rem;
  height: 1.226667rem;
}
.student_item .student_info {
  margin-left: .373333rem;
  width: 100%;
  border-bottom: .5px solid #F0F0F0;
  padding-bottom: .266667rem;
  padding-top: .233333rem;
}
.student_info .info {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  width: 100%;
}

.student_info .intention_level {
  display: inline-block;
  padding: 0 2px;
  box-sizing: border-box;
  font-size: .32rem;
  color: #fff;
  background: #8B9DFB;
  margin-left: .186667rem;
  margin-top: 1px;
  border-radius: .106667rem
}

.student_info .student_name {
  font-size: .373333rem;
  color: #333333;
}


.phone_box {
  margin-left: .226667rem;
}
.student_info .icon_phone {
  margin-right: .08rem;
}

.student_info .status {
  font-size: .32rem;
  color: #FFC834;
  margin-left: auto;
}

.info1 {
  margin-bottom: .066667rem;
}

.info2, .info3 {
  color: #A0A0A0;
  font-size: .32rem;
}
.info3 .next_follow {
  /* margin-left: .266667rem; */
}

.parent_name {
  margin-right: .346667rem;
}

.time {
  color: #FFC834;
  margin-left: auto;
}

.timeZero {
  color: #EF6B6B;
}




</style>

<script>
import avatarBoy from '../../../assets/img/avatarBoy.png'
import avatarGirl from '../../../assets/img/avatarGirl.png'

import screen from '../../assembly/screen.vue'
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("followList");


export default {
  name: 'followList',
  data() {
    return {
      jwtAuth: {},
      studentList: [
      ],

      schoolList: [],
      totalRows: '',
      totalPages: '',

      /* 筛选 */
      screenData: {
        school: '',
        schoolId: [],
        contractStatus: '',
        contractStatusId: '',
        saleStatus: '',
        saleStatusId: '',
        product: '',
        productId: [],
        parentLabels: '',
        parentLabelsId: '',
        customerSource: '',
        customerSourceId: '',
        salesPerson: '',
        salesPersonId: '',
        noFollowDay: '',
        noFollowDayId: '',
        todayFollowStatus: '',
        todayFollowStatusId: '',
        createStartTime: "",
        createEndTime: "",
      },
      screenList: {
        showSearch: false,
        dateType: 'date',
        minDate: new Date(2019, 0, 1),
        data: [
          {
            label: '校区',
            key: 'school',
            checkType: 'checkbox',
            bottomType: 'list',
            options: [],
          },
          {
            label: '签约状态',
            key: 'contractStatus',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '销售状态',
            key: 'saleStatus',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '学员标签',
            key: 'parentLabels',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '意向课程',
            key: 'product',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '客户来源',
            key: 'customerSource',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '课程顾问',
            key: 'salesPerson',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '未跟进天数',
            key: 'noFollowDay',
            checkType: 'radio',
            bottomType: 'timeSection',
            options: [],
          },
          {
            label: '当天跟进状态',
            key: 'todayFollowStatus',
            checkType: 'radio',
            bottomType: 'list',
            options: [
              {
                id: '',
                label: '全部'
              },
              {
                id: '10130',
                label: '今日待跟进'
              },
              {
                id: '10131',
                label: '今日已跟进'
              }
            ],
          },
          {
            label: '录入时间-开始',
            key: 'createStartTime',
            checkType: 'date',
            bottomType: 'date',
            options: [],
          },
          {
            label: '录入时间-结束',
            key: 'createEndTime',
            checkType: 'date',
            bottomType: 'date',
            options: [],
          },
          
        ],
      },
      activeScreenKey: '',
      currentDate: new Date(),
      /* end */
      curPage: 1,
    }
  },
  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    this.queryAllSchool();
    this.queryAllSaleStatus();
    this.queryAllParentLabel();
    this.quertAllCustomerSource();
   
  },
  mounted() {
   
  },
  
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),
    reset() {
      let data = {};
      this.queryAllContractStatus(data);
      this.queryAllProduct({});
      this.queryAllSalePerson({});
    },

    

    searchData(data) {
      console.log(data);
      let searchData = {};
      // console.log(searchData.schoolId);
      searchData.schoolId = data.schoolId.length > 0 ? data.schoolId[0].split(',') : [];
      // searchData.schoolId = '430879e507d74d229c3602c851f03be5';
      searchData.signingStatus = data.contractStatusId;
      searchData.salesStatus = data.saleStatusId;
      searchData.labelManagementId = data.parentLabelsId;
      searchData.productId = data.productId.length > 0 ? data.productId.split(',') : [];
      searchData.customerId = data.customerSourceId;
      searchData.personId = data.salesPersonId;
      searchData.daysNotFollowedStart = data.noFollowDay.split('-')[0];
      searchData.daysNotFollowedEnd = data.noFollowDay.split('-')[1] || '';
      searchData.daysNeedFollow = data.todayFollowStatusId;
      searchData.createEndTime = data.createEndTime;
      searchData.createStartTime = data.createStartTime;

      this.screenList.showSearch = false;
      this.initData(searchData)
    },
    
    initData(searchData) {
      let data = {}
      Object.assign(data, searchData);
      // console.log(this.jwtAuth)
      data.employeesId = this.jwtAuth.employeesId;
      data.createBy = this.jwtAuth.employeesId;

      data.pageSize = 10
      data.curPage = this.curPage;

      // console.log(data.schoolId);
      if(!data.schoolId || data.schoolId.length == 0) {
        data.schoolId = [];
        this.schoolList.forEach(item => {
          data.schoolId.push(item.schoolId);
        })
      }
      

      this.post({
        API: 'selectBmFollowPageList',
        data: data
      }).then(res => {
        this.studentList = res.data
        this.totalRows = res.page.totalRows;
        this.totalPages = res.page.totalPages;

        this.studentList.forEach(item => {
          if(item.notFollowDays && item.notFollowDays.indexOf('0') == 0) {
            item.timeZero = true;
          }

          switch (item.salesStatus) {
            case '10130':
              item.statusName = '待跟进'
              break;
            case '10131':
              item.statusName = '已跟进'
              break;
            case '10132':
              item.statusName = '已定金'
              break;
            case '10133':
              item.statusName = '已试听'
              break;
            case '10134':
              item.statusName = '退定金'
              break;
            case '10135':
              item.statusName = '停止跟进'
              break;
            case '10136':
              item.statusName = '已购课'
              break;
          
            default:
              break;
          }
        })

        
      })
    },

    toStudentDetail(item, event) {
      if(event.srcElement.tagName == 'A') {
        return false;
      }

      this.$router.push({
        name: 'studentDetail',
        params: {
          id: item.studentId,
        }
      })
    },

    changePage(e) {
      console.log(e)
      this.curPage = e;
      this.initData();
    },


    /* ========  筛选组件  =========== */
    schoolChange(data) {
      console.log(data);
      this.queryAllSalePerson(data);
      this.queryAllProduct(data);
      this.queryAllContractStatus(data);
    },

    queryAllContractStatus(data) {
      let schoolIdList = []
      this.schoolList.forEach(item => {
        schoolIdList.push(item.schoolId);
      })
      if(!data.schoolId) {
        data.schoolId = schoolIdList
      }else{
        data.schoolId = [data.schoolId]
      }

      // 查询 签约状态
      this.post({       
        API: 'queryByDicKeyForStudent',
        data: {
          dicKey: 'contractStatus',
          schoolId: data.schoolId,
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.dicCode;
          val.label = val.dicLabel;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'contractStatus') {
            item.options = res;
          }
        })
      })
    },
    queryAllSaleStatus() {
      // 查询 销售状态
      this.formGet({       
        API: 'queryByDicKey',
        data: {
          dicKey: 'saleStatus',
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.dicCode;
          val.label = val.dicLabel;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'saleStatus') {
            item.options = res;
          }
        })
      })
    },
    queryAllParentLabel() {
      this.post({
        API: 'selectBmLabelManagementPageList',
        data: {}
      }).then(res => {
        res = res.filter(val => {
          return val.parentId != 0;
        })
        res.map((val) => {
          val.id = val.labelManagementId;
          val.label = val.labelManagementName;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'parentLabels') {
            item.options = res;
          }
        })
      })
    },
    quertAllCustomerSource() {
      this.post({
        API: 'selectBmCustomerPageList',
        data: {}
      }).then(res => {
        res.map((val) => {
          val.id = val.customerId;
          val.label = val.customerRemark;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'customerSource') {
            item.options = res;
          }
        })
      })
      
    },
    queryAllSalePerson(data) {
      let schoolIdList = []
      this.schoolList.forEach(item => {
        schoolIdList.push(item.schoolId);
      })

      let schoolId = '';
      if(!data.schoolId) {
        schoolId = schoolIdList.join(',');
      }else{
        schoolId = data.schoolId
      }

      this.formGet({
        API: 'queryPersonBySchoolId',
        data: {
          positionCode: '2,5',
          schoolId: schoolId,
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.employeesId;
          val.label = val.employeesName;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'salesPerson') {
            item.options = res;
          }
        })
      }).catch(err => {
        this.$toast.fail(err);
      })
    },
    queryAllSchool(btnId) {
      let accountId
      this.jwtAuth.schoolId == '' ? accountId = '' : accountId = this.jwtAuth.accountId
      
      this.post({ 
        API: 'queryAllSchool',
        data: {
          accountId: accountId,
          menuId: btnId || 'studentManagement',
          schoolIds: this.jwtAuth.schoolId.split(','),
        }
      }).then(res => {
        res = res.filter(val => {
          return val.schoolId !== '';
        });
        res.map((val) => {
          val.label = val.schoolName;
          val.id = val.schoolId;
        })

        if(btnId) {
          this.powerSchoolList = res
        }else{
          this.schoolList = res
          this.initData();
        }

        
        let data = {};
        console.log(data);
        this.queryAllContractStatus(data);
        this.queryAllProduct({});
        this.queryAllSalePerson({});

        this.screenList.data.forEach(item => {
          if(item.key == 'school') {
            item.options = this.schoolList;
          }
        })
      }).catch(err => {
        this.$toast.fail(err);
      })
    },
    queryAllProduct(data) {
      let schoolIdList = []
      this.schoolList.forEach(item => {
        schoolIdList.push(item.schoolId);
      })

      let schoolId = '';
      if(!data.schoolId) {
        schoolId = schoolIdList.join(',');
      }else{
        schoolId = data.schoolId
      }

      this.formGet({
        API: 'queryProductBySchoolId',
        data: {
          schoolId: schoolId,
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.productId;
          val.label = val.productName;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'product') {
            item.options = res;
          }
        })

      }).catch(err => {
        this.$toast.fail(err);
      })
    },

    
    /* ========  筛选组件 end  =========== */
    
  },
  computed: {
    ...mapState([
    ]),
    nowDate() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      return `${year}年${month}月${day}日`
    },
    nowDay() {
      let date = new Date();
      let day = date.getDay();
      switch (day) {
        case 1:
          return '周一'
          break;
        case 2:
          return '周二'
          break;
        case 3:
          return '周三'
          break;
        case 4:
          return '周四'
          break;
        case 5:
          return '周五'
          break;
        case 6:
          return '周六'
          break;
        case 0:
          return '周日'
          break;
      
        default:
          break;
      }
    },
    computedAvatar() {
      return function(item) {
        if(item.sex == 1) {
          return avatarBoy
        }else{
          return avatarGirl
        }
      }
    }
   
  },
  components: {
    screen,
  },
}

</script>